<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <template v-if="isDeleteShow">
       <span @clearAll="clearAll">全部删除</span>
      <span @click="isDeleteShow">完成</span>
      </template>
      <van-icon
       v-else
      @click="isDeleteShow = true" />
    </van-cell>
    <van-cell
    v-for="(value,index) in SearchHistory"
    :key="index"
    :title="value"
    @click="onClickHistory(value,index)">
      <van-icon name="close"
       v-if="isDeleteShow" />
    </van-cell>

  </div>
</template>

<script>

/*
  目标5：历史记录的添加和展示
  1. 当输入框的内容触发查询结果时，会将该内容添加到查询历史数组里 （onSearch方法）
  2. 如果原来的查询历史数组中有这个值 ，那么将该元素的位置放到数组的最前面（索引为1的位置）
*/
/*
  目标6：历史记录的切换与删除
  1. 创建一个状态变量，来控制删除状态和非删除状态的切换
  2. 给垃圾桶和完成按钮绑定切换状态变量的点击事件
  3. 当页面处于非删除状态时，点击单元格调用onSearch
  4. 当处于删除状态时，点击单元格删除历史记录数组中的当前元素
  5. 当点击全部删除的按钮时，需要将历史记录数组全部清空
*/

export default {
  name: 'SearchHistory',
  props: {
    SearchHistory: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      isDeleteShow: false,
      SearchHistoryClone: this.SearchHistory
    }
  },
  methods: {
    onClickHistory (value, index) {
      if (this.isDeleteShow) {
        this.SearchHistoryClone.splice(index, 1)
      } else {
        this.$emit('search', value)
      }
    },
    // 全部删除
    clearAll () {
      this.$emit('clearAll')
    }
  }
}
</script>

<style scoped lang="less"></style>
